﻿/* PHP Photo Album script v2.11
* Last updated: Aug 10th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//** v2.11:
//1) Fade animation now a function of time (default=500 milliseconds)
//2) Fixed sort by "desc" not working in IE


fw = 800;
fh = 500;
view_image = false;
function hotkey(){
	KEY_CODES = {
			  37: 'left',
			  38: 'up',
			  39: 'right',
			  40: 'down',
			  13: 'enter',
			  27: 'esc'
			}
		 
	KEY_STATUS = { keyDown:false };
	for (code in KEY_CODES) {
	  KEY_STATUS[KEY_CODES[code]] = false;
	}
	$(window).keydown(function (e) {
		  KEY_STATUS.keyDown = true;
		  e.preventDefault();
		  // perform functionality for keydown
		  if (KEY_CODES[e.keyCode]) {
		  	if(e.keyCode == 27 && view_image == true )
		  	{
		  		// ESC  
		  		thumbnailviewer.closeit();
		  	}

		  	else if(e.keyCode == 39 && view_image == true)
		  	{
		  		// Arrow Right	
//				alert(e.keyCode);
		  		thumbnailviewer.shownextimage();
		  	}
		  	else if(e.keyCode == 37 && view_image == true)
		  	{
		  		// Arrow Left	
		  		thumbnailviewer.showprevimage();
		  	}
		  	else if(e.keyCode == 13 && view_image == true)
		  	{
		  		// Arrow Left	
		  		thumbnailviewer.shownextimage();
		  	}
		  }

		}).keyup(function (e) {
		  KEY_STATUS.keyDown = false;
		  if (KEY_CODES[e.keyCode]) {	  	
		    e.preventDefault();
		    KEY_STATUS[KEY_CODES[e.keyCode]] = false;
		  }
		});	
}
function getpagesize() //get the width and height of current page
{
    var returnvalue= new Array(0,0);
    var scnWid,scnHei;
	if (self.innerHeight) // all except Explorer
	{
		scnWid = self.innerWidth;
		scnHei = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
		// Explorer 6 Strict Mode
	{
		scnWid = document.documentElement.clientWidth;
		scnHei = document.documentElement.clientHeight;
	}
	else if (document.body) // other Explorers
	{
		scnWid = document.body.clientWidth;
		scnHei = document.body.clientHeight;
	}
    returnvalue[0]=scnWid;
    returnvalue[1]=scnHei;
    return returnvalue;
}
//w: width image, h: height image, lw: width form ,lh: height form
//return: new width, height
function resize(w,h,lw,lh){
	var dh = lh - 50;
	var dw = lw - 50;
	var rate_w  = w/dw;
	var rate_h = h/dh;
	var value = new Array();
	if (w <= dw && h <= dh){
		newH = h;
		newW = w;
	}else{
		if (rate_w > rate_h){
			newH = h/rate_w;
			newW = w/rate_w;
		}else{
			newH = h/rate_h;
			newW = w/rate_h;
		}
	}
	value[0] =  newW;
	value[1] =  newH;
	return value;
}
function hidediv(id) {
	if (document.getElementById(id)) { // DOM3 = IE5, NS6
		document.getElementById(id).style.visibility = 'hidden';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.visibility = 'hidden';
		}
		else { // IE 4
			document.all.id.style.visibility = 'hidden';
		}
	}
}


function showdiv(id) {
		if (document.getElementById(id)) { // DOM3 = IE5, NS6
			document.getElementById(id).style.visibility = 'visible';
		}
		else {
			if (document.layers) { // Netscape 4
				document.id.visibility = 'visible';
			}
			else { // IE 4
				document.all.id.style.visibility = 'visible';
			}
		}
} 
function phpimagealbum(setting){
	this.fw = fw;
	this.fh = fh;
	this.albumvar=setting.albumvar
	this.kind = setting.kind;
	this.albumvar.images.pop() //remove last "dummy" array element
	for (var i=0; i<this.albumvar.images.length; i++){
		if (this.albumvar.desc[i]) //if a manual desc exists for this image
			this.albumvar.images[i][3]=this.albumvar.desc[i] //extend image array with desc
	}
	this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
	this.dimensions=setting.dimensions || [3,3]
    this.albumpages=Math.ceil(this.albumvar.images.length/(this.dimensions[0]*this.dimensions[1]))
//	this.sortby=setting.sortby || ["file", "asc"],
	this.autodesc=setting.autodesc
	this.showsourceorder=setting.showsourceorder
	this.onphotoclick=setting.onphotoclick || function(){}
	this.photodivs=[] //array referencing each DIV that contains a slide
	this.navlinks=null //HTML collection
    this.prev = null //reference to previous button
	this.next = null //reference to next button
	this.currentpage = 1;
    this.hasnavlink = true; //navigation with page number
//	if (setting.sortby[0]=="file") //sort by filename (asc)
//		this.albumvar.images.sort(function(a,b){return a[1].localeCompare(b[1])})
//	else //sort by date (asc)
//		this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])})
//	if (setting.sortby[1]=="desc"){
//		this.albumvar.images.reverse()
//	}
	this.status = setting.status;
	if(this.status == 'onpress' || this.status == 'event'){
		this.buildgallery();
        this.hasnavlink = false;
	}else{
		this.buildnav(true);
		this.buildgallery();
	}
}

phpimagealbum.prototype={
    reset:function(albumvar){
        this.albumvar = albumvar;
		this.albumvar.images.pop();
	    this.albumpages=Math.ceil(this.albumvar.images.length/(this.dimensions[0]*this.dimensions[1]))
        this.gotopage(1);
    },
	buildgallery:function(){
		var thisalbum=this
		var curimage=0
        var str_photodiv = "";
		document.write('<div id="'+this.albumdivid+'" class="photoalbum">')
		str_photodiv = "<ul class='thumb'>";
		for (var rows=0; rows<this.dimensions[1]; rows++){
			for (var cols=0; cols<this.dimensions[0]; cols++){
				if (curimage<this.albumvar.images.length){
					str_photodiv += "<li><a href='#'>" + phpimagealbum.routines.buildimage(this.albumvar, curimage, this.autodesc, this.showsourceorder) + "</a></li>";
				}else{
					str_photodiv += "<li><a href='#'> </a></li>";
				}
				curimage++;
			} //end cols loop
		} //end rows loop
		str_photodiv += "</ul>";
		document.write(str_photodiv);
		document.write('</div>')
		var albumdiv=document.getElementById(this.albumdivid)
		var alldivs=albumdiv.getElementsByTagName('li');
		for (var i=0; i<alldivs.length; i++){
            this.photodivs.push(alldivs[i]);
		}
		phpimagealbum.routines.addEvent(albumdiv, function(e){
			var e=window.event || e
			var target=e.srcElement || e.target
			if (target.tagName=="IMG" && target.getAttribute('data-index')){
				thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
			}
		}, "click")
	},

	buildnav:function(hasarrow){
		var thisalbum=this
		var navid=this.albumdivid + '_paginate'
		document.write('<div id="' + navid +'" class="albumnavlinks">')
		for (var i=this.albumpages;i>0;i--){//i<Math.ceil(this.albumvar.images.length/this.photodivs.length)+1; i++){
			document.write('<a href="#Page' + i+ '" rel="'+i+'">'+i+'</a> ')
		}
		document.write('</div>')
		var navdiv=document.getElementById(navid)
		phpimagealbum.routines.addEvent(navdiv, function(e){
			var e=window.event || e
			var target=e.srcElement || e.target
			if (target.tagName=="A"){
				thisalbum.gotopage(target.getAttribute('rel'))
				if (e.preventDefault)
					e.preventDefault()
				else
					return false
			}
		}, "click")
//		if(this.albumpages){
			this.navlinks=navdiv.getElementsByTagName('a')
			this.navlinks[this.albumpages-1].className="current"
//		}
        if(hasarrow)
        {
            document.write('<div id="prevAlbum" class="albumprevarrow"><img src="images/Theme/prev_black.png" /></div>')
            document.write('<div id="nextAlbum" class="albumnextarrow"><img src="images/Theme/next_black.png" /></div>')
            this.prev = document.getElementById("prevAlbum")
            this.next = document.getElementById("nextAlbum")
            //var prev=document.getElementById("prevAlbum")
            phpimagealbum.routines.addEvent(this.prev, function(e){
                var e=window.event || e
                var target=e.srcElement || e.target
                if (target.tagName=="IMG"){
                    thisalbum.gopreviouspage();
                }
            }, "click")
            phpimagealbum.routines.addEvent(this.next, function(e){
                var e=window.event || e
                var target=e.srcElement || e.target
                if (target.tagName=="IMG"){
                    thisalbum.gonextpage();
                }
            }, "click")

            this.hidearrowbutton();
        }
	},
    gopreviouspage:function(){
        var i = parseInt(this.currentpage)
        this.gotopage(i - 1 );
        this.hidearrowbutton();
    },

    gonextpage:function(){
        var i = parseInt(this.currentpage);
		if (this.currentpage == this.albumpages){
			this.gotopage(1);
		}
		else{
			this.gotopage(i + 1);
		}
			this.hidearrowbutton();
    },

    hidearrowbutton:function(){
        if(this.prev && this.next){
            if (this.currentpage == 1)
                this.prev.style.visibility = "hidden";
            else this.prev.style.visibility = "visible";
            if (this.currentpage == this.albumpages)
                this.next.style.visibility = "hidden";
            else this.next.style.visibility = "visible";
        }
    },

	gotopage:function(p){
		var startpoint=(p-1)*this.photodivs.length
		for (var i=0; i<this.photodivs.length; i++){
			this.photodivs[i].innerHTML=null
			this.photodivs[i].innerHTML=(typeof this.albumvar.images[startpoint+i]!="undefined")? "<a href='#'>" + phpimagealbum.routines.buildimage(this.albumvar, startpoint+i, this.autodesc, this.showsourceorder,this.kind) + "</a>" : ""
		}
        this.currentpage = p;
        if (this.hasnavlink){
            for (var i=0; i<this.navlinks.length; i++)
                this.navlinks[i].className=''
            this.navlinks[this.navlinks.length-p].className="current"
            this.hidearrowbutton()
        }
	}

}

phpimagealbum.routines={

	albumcount: 0,

	buildimage:function(albumvar, i, desc, showorder,kind){
		//var desc=(desc && desc!="")? '<br />' + desc.replace(/(%i)|(%d)|(%s)/g, function(m){
		//		return (m=="%i")? i+1 : (m=="%d")? albumvar.images[i][2] : ""
		//	}) : ''
        //return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') + '<img src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' + (albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '');
		var path_thumb = "upload/thumb/" + albumvar.images[i][6];
			return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') + '<span class="fadehover">' + '<img class="a" src="' + path_thumb + '" data-index="' + i +'" />'; //remove description
	},
	addEvent:function(target, functionref, tasktype){
		if (target.addEventListener)
			target.addEventListener(tasktype, functionref, false);
		else if (target.attachEvent)
			target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
	}

}

/////////Following is thumbnailviewer(), a plugin to PHP Photo Album for enlarging thumbnail images/////////////////


var thumbnailviewer={
albumvar:null,
enableAnimation: true, //Enable fading animation?
fadeDuration: 500, //duration of fade animation in milliseconds
//definefooter: '<div class="footerbar" onClick="thumbnailviewer.closeit()">CLOSE X</div>', //Define HTML for footer interface
//definedescription: '<div id="thumbDescription" class="thumbBoxText"><p>a</p> </div>',
//defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
//definePrevImg: '<div id="prevDiv"><img src="images/Theme/previous.png" onclick="thumbnailviewer.showprevimage()"/></div>',
//defineNextImg: '<div id="nextDiv"><img src="images/Theme/next.png" onclick="thumbnailviewer.shownextimage()"/></div>',


/////////////No need to edit beyond here/////////////////////////

opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
animateobj: {curdegree:0, starttime:null, opacitytimer:null},

createthumbBox:function(){
	//write out HTML for Image Thumbnail Viewer plus loading div
    document.write('<div id="lightboxbackground"></div>')
    //document.write('<div id="thumbBoxContainer">')
    document.write('<div id="thumbBox" >')
    document.write('<div style="left:'+ (fw -20) +'px; top:-4.5px; font-size:20px;"   class="footerbar"  onClick="thumbnailviewer.btn_closeit()">X</div>')
    document.write('<div id="thumbImage"></div>')
    document.write('<div id="thumbDescription" class="thumbBoxText"><p>a</p> </div>')
    document.write('<div id="prevDiv" style="float:left;top:250px;"><img src="images/Theme/previous.png" onclick="thumbnailviewer.showprevimage()"/></div>')
    document.write('<div id="nextDiv" style="float:right;top:250px;"><img src="images/Theme/next.png" onclick="thumbnailviewer.shownextimage()"/></div>')
    document.write('</div>')
    //document.write('</div>')
    
	//document.write('<div id="thumbBoxContainer">'+this.definePrevImg+this.defineNextImg+'<div id="thumbBox" ><div id="thumbImage"></div>'+this.definedescription+'</div>'+this.definefooter+'</div>')
    document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
    this.thumbBackground=document.getElementById("lightboxbackground")
	this.thumbBackground.style.height="740px" ;
//    if(h > 700){
//    	this.thumbBackground.style.height= h +"px" ;
//    }else{
//    	this.thumbBackground.style.height= h + 100 +"px" ;
//    }
    this.thumbBoxContainer=document.getElementById("thumbBoxContainer")
	this.thumbBox=document.getElementById("thumbBox")
    this.thumbImage = document.getElementById("thumbImage")
	this.thumbDesc=document.getElementById("thumbDescription") //Reference div that holds the shown image
	this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
	this.sbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    this.currentIndex = 0;
},


centerDiv:function(divobj){ //Centers a div element on the page
	var winattrs={x:window.pageXOffset || this.sbody.scrollLeft, y:window.pageYOffset || this.sbody.scrollTop, w:window.innerWidth || this.sbody.clientWidth, h:window.innerHeight || this.sbody.clientHeight};
	this.winattrs=winattrs;
	var divattrs={w:divobj.offsetWidth, h:divobj.offsetHeight};
	//divobj.style.left=winattrs.x + winattrs.w/2 - divattrs.w/2 + "px";
	//divobj.style.top=winattrs.y + (winattrs.h>divattrs.h? winattrs.h/2 - divattrs.h/2 : 10) + "px";
	divobj.style.left=winattrs.x + winattrs.w/2 - fw/2 + "px";
	divobj.style.top=winattrs.y + (winattrs.h>fh? winattrs.h/2 - fh/2 : 10) + "px";
	divobj.style.height= fh+"px";
	divobj.style.width= fw+"px";
	divobj.style.visibility="visible";
},

showthumbBox:function(fit2screen){ //Show ThumbBox div
	if (fit2screen && parseInt(this.featureImage.offsetWidth)>(this.winattrs.w-70)){
		this.featureImage.style.width=this.winattrs.w-70+"px"
	}
	thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
//	this.centerDiv(this.thumbBox)

	if (this.enableAnimation) //if animation enabled, hide image first before applying opacity
		this.featureImage.style.visibility="hidden"
    //this.centerDiv(this.thumbBoxContainer)
	this.top_img = this.thumbBox.style.top;
	this.left_img= this.thumbBox.style.left;
    this.thumbBackground.style.visibility="visible";
	this.thumbBackground.style.height=  "740px" ;
	if (this.enableAnimation){ //If fading animation enabled
		this.animateobj.curdegree=0
		this.featureImage.style.visibility="visible"
		this.animateobj.starttime=new Date().getTime() //get time just before animation is run
		this.animateobj.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 10)
	}
},

preloader: function (imgindex){
	var maxindex = album.albumvar.images.length - 1;
	var min = imgindex - 10;
	var max = imgindex + 10;
	if (min + maxindex <0){
		min =0;
	}
	if (maxindex - max < 0){
		max = maxindex;
	}
	if (maxindex < 20){
		min = 0;
		max = maxindex;
	}
	var imageHTML= "";
	var hide_img = "";
	for(var i = min; i < max; i++){
		var index = i;
		if ( i < 0){
			index = maxindex + i ;
		}
		if(i > maxindex){
			index = i - maxindex;
		}
		hide_img = album.albumvar.images[index][1];	
	    imageHTML +='<img src="'+hide_img+'" style="visibility:hidden;width:0px;height:0px"/>' //Construct HTML for shown image
	}
	return imageHTML;
},

loadimage:function(imgsrc, imgw, imgh, imgindex, albumdata){ //Load image function that gets attached to each link on the page with rel="thumbnail"
    
    if (albumdata)
        this.albumvar = albumdata;
	if (this.thumbBox.style.visibility == "visible"){//if thumbox is visible on the page already
//		alert(this.thumbBox.style.visibility)
		this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
	}
	view_image = true;		
	var styled=(this.enableAnimation? this.opacitystring+';' : '') +(imgw && imgh? 'width:'+parseInt(imgw)+'px; height:'+parseInt(imgh)+'px;' : '')
	var imageHTML='<img src="'+imgsrc+'" style="'+styled+'"onclick="thumbnailviewer.shownextimage()"/>' //Construct HTML for shown image
	//load hide image
	imageHTML += this.preloader(imgindex);

	var imgt =  (fh - imgh)/2;
//    var h = getpagesize()[1];
    this.thumbBackground.style.visibility="visible";
	this.thumbBackground.style.height=  "740px" ;
    this.thumbImage.style.margin = parseInt(imgt) + "px 0 0 0";
    showdiv('prevDiv');
    showdiv('nextDiv');    
    //this.thumbImage.style.top = (400 - imgh)/2 +"px";
	this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
	this.centerDiv(this.thumbBox);

	this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself

	if (this.featureImage.complete)
    {
		thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false)
    }

	else{
		this.featureImage.onload=function(){ //When target image has completely loaded
			thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false) //Display "thumbbox" div to the world!

		}
	}
    this.currentIndex = imgindex;
    //this.thumbDesc.style.left = "0px"; 
    this.thumbDesc.style.top = fh+"px";
    this.thumbDesc.style.width = fw+"px";
	if(this.albumvar.images[imgindex][3] != ""){
		this.thumbDesc.innerHTML='<div style="width:780px;padding-left:20px;padding-bottom: 5px;font-size: 18px;"><span>Caption: '+this.albumvar.images[imgindex][3]+'</span></div>' ;
	}else{
		this.thumbDesc.innerHTML= "";
	}
	if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
		this.featureImage.src=imgsrc
	this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
		thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
	}
    
},


loadonpress: function(obj,index){	
	var data = obj.info[index];
	if(data.length > 0){
		  var size = resize(data[0][4],data[0][5],fw,fh);
		  var imgw = size[0];
		  var imgh = size[1];
		if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
			this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
		var styled=(this.enableAnimation? this.opacitystring+';' : '') +(imgw && imgh? 'width:'+parseInt(imgw)+'px; height:'+parseInt(imgh)+'px;' : '')
		var imageHTML='<img src="upload/thumb/'+data[0][6]+'" style="'+styled+'"  />' //Construct HTML for shown image
		var imgt =  (fh - imgh)/2;
		this.thumbBackground.style.visibility="visible";
		this.thumbBackground.style.height=  "740px" ;
		this.thumbImage.style.margin = parseInt(imgt) + "px 0 0 0";
		view_image = false;
		hidediv('prevDiv');
		hidediv('nextDiv');
		//this.thumbImage.style.top = (400 - imgh)/2 +"px";
		//this.(this.thumbLoading, imgw, imgh) //Center and display "loading" div while we set up the image to be shown
		this.thumbImage.innerHTML=imageHTML ; //Populate thumbImage div with shown image's HTML (while still hidden)
		this.centerDiv(this.thumbBox);
		this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
		if (this.featureImage.complete)
		{
			thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false)
		}
		else{
			this.featureImage.onload=function(){ //When target image has completely loaded
				thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false) //Display "thumbbox" div to the world!
			}
		}
		this.thumbDesc.style.left = "0px"; 
		this.thumbDesc.style.top = fh+"px";
		this.thumbDesc.style.width = fw+"px";
		this.thumbDesc.innerHTML='<p id="page_onpress"></p><p><a id= "onpress_screen" href ="' + data[0][1] +'">View Full Screen:Hiển thị với kích thước thật</a></p>'
		if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
			this.featureImage.src=imgsrc
		this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
			thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
		}	
		
		if(data.length > 1){
			var str_atag ="<div style='padding-left: 10px;'>";
			for(var i=0;i< data.length ;i++){
				str_atag += "<a href='#' class='atag_onpress' value='"+ i +"' >" + (i+1)+ "|</a>";
			}	
			str_atag +="</div>";
			$('#page_onpress').html(str_atag);
			$('.atag_onpress').click(function(){
				thumbnailviewer.tab_onpress(data,$(this).attr('value'));
			});
		}

	}

},
tab_onpress:function(data, value){
	var size = resize(data[value][4],data[value][5],fw,fh);
	var imgw = size[0];
	var imgh = size[1];	
	var styled=(this.enableAnimation? this.opacitystring+';' : '') +(imgw && imgh? 'width:'+parseInt(imgw)+'px; height:'+parseInt(imgh)+'px;' : '')
	var imageHTML='<img src="upload/thumb/'+data[value][6]+'" style="'+styled+'"  />' //Construct HTML for shown image
	this.thumbImage.innerHTML=imageHTML ; //Populate thumbImage div with shown image's HTML (while still hidden)
	var imgt =  (fh - imgh)/2;
	this.thumbBackground.style.visibility="visible";
	this.thumbBackground.style.height=  "740px" ;
	this.thumbImage.style.margin = parseInt(imgt) + "px 0 0 0";
	view_image = false;
	hidediv('prevDiv');
	hidediv('nextDiv');
	//this.thumbImage.style.top = (400 - imgh)/2 +"px";
	//this.(this.thumbLoading, imgw, imgh) //Center and display "loading" div while we set up the image to be shown
	this.thumbImage.innerHTML=imageHTML ; //Populate thumbImage div with shown image's HTML (while still hidden)
	this.centerDiv(this.thumbBox);
	this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
	if (this.featureImage.complete)
	{
		thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false)
	}
	else{
		this.featureImage.onload=function(){ //When target image has completely loaded
			thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false) //Display "thumbbox" div to the world!
		}
	}
	this.thumbDesc.style.left = "0px"; 
	this.thumbDesc.style.top = fh+"px";
	this.thumbDesc.style.width = fw+"px";

	if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
		this.featureImage.src=imgsrc
	this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
			thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
		}	
	$("#onpress_screen").attr('href',data[value][1]);
},
setopacity:function(el, value){
	el.style.opacity=value
	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
		el.style.MozOpacity=value
		if (el.filters){
			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
		}
	}
},


opacityanimation:function(){ //Gradually increase opacity function
var elapsed=new Date().getTime()-this.animateobj.starttime //get time animation has run
	if (elapsed<this.fadeDuration){
		this.setopacity(this.featureImage, this.animateobj.curdegree)
	}
	else{
		clearInterval(this.animateobj.opacitytimer)
		this.setopacity(this.featureImage, 1)
	}
	this.animateobj.curdegree=(1-Math.cos((elapsed/this.fadeDuration)*Math.PI)) / 2

},

closeit:function(){ //Close "thumbbox" div function

	if (typeof this.animateobj.opacitytimer!="undefined"){
		clearInterval(this.animateobj.opacitytimer);
	}
	view_image = false;
	this.thumbBox.style.left="-4000px"
	this.thumbBox.style.top="-4000px"
	this.thumbBox.style.visibility="hidden"
    this.thumbBackground.style.visibility="hidden"
	this.thumbImage.innerHTML="";
	this.thumbBackground.style.height=  "0px" ;
},
btn_closeit:function(){ // action close
    view_image = false;
    this.closeit();
    
},
shownextimage:function(){
    var index = this.currentIndex;
    var newindex = index + 1;
    var maxindex = album.albumvar.images.length - 1;
    var imgsrc = "";
    if (index == maxindex){
        newindex = 0;
    }
    imgsrc = album.albumvar.images[newindex][1];
    curWidth = album.albumvar.images[newindex][4];
    curHeight = album.albumvar.images[newindex][5];
     var img = resize(curWidth,curHeight,fw,fh);
    this.loadimage(imgsrc,img[0],img[1], newindex);
},

showprevimage:function(){
    var index = this.currentIndex;
    var newindex = index - 1;
    var maxindex = album.albumvar.images.length - 1;
    var imgsrc ="";
    var curHeight;
    var curWidth;
    if (index == 0){
        newindex = maxindex;
    }
    imgsrc = album.albumvar.images[newindex][1];
    curWidth = album.albumvar.images[newindex][4];
    curHeight = album.albumvar.images[newindex][5];
     var img = resize(curWidth,curHeight,fw,fh);
    this.loadimage(imgsrc,img[0],img[1], newindex);
}
}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
hotkey();
window.onresize=function(){
	if (thumbnailviewer && thumbnailviewer.thumbBox.style.visibility=="visible"){
		thumbnailviewer.centerDiv(thumbnailviewer.thumbBox);
	}		
}



